<!-- 定义导航栏 -->
{% load static %}
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
  <div class="container">

    <!-- 导航栏商标 -->
    <a class="navbar-brand" href="{% url 'article:article_list' %}">Share Wave 博客</a>

    <!-- 导航入口 -->
    <div>
      <ul class="navbar-nav">
        <!-- 条目 -->
        <li class="nav-item d-flex justify-content-center align-items-center">

          <!-- 改写了这里的 href -->
          <a class="nav-link" href="{% url 'article:article_create' %}"><i class="fas fa-edit"></i> 写文章</a>
          <a class="nav-link" href="{% url 'article:article_list' %}"> <i class="fas fa-list"></i> 文章列表</a>
          {% if user.is_superuser %}
          <a class="nav-link" href="{% url 'admin:index' %}">
            <i class="fas fa-cog"></i> 后台管理
          </a>
          
          {% endif %}

        </li>
        <!-- Django的 if 模板语句 -->
        {% if user.is_authenticated %}
        <!-- 如果用户已经登录，则显示用户名下拉框 -->
        <li class="nav-item dropdown">
          <a class="nav-link dropdown-toggle d-flex align-items-center" href="#" id="navbarDropdown" role="button" data-toggle="dropdown"
            aria-haspopup="true" aria-expanded="false">
            {% if user.profile.avatar %}
              <img src="{{ user.profile.avatar.url }}" class="rounded-circle mr-2"
                style="width: 30px; height: 30px; object-fit: cover;">
            {% else %}
              <img src="{% static 'images/default_avatar.png' %}" class="rounded-circle mr-2"
                style="width: 30px; height: 30px; object-fit: cover;">
            {% endif %}
            <span style="margin-left: 0.2vw;">{{ user.username }}</span>
          </a>
          <div class="dropdown-menu dropdown-menu-right" aria-labelledby="navbarDropdown">
            <a class="dropdown-item" href="{% url 'comment:notification_list' %}"><i class="fas fa-bell"></i> 查看通知</a>
            <a class="dropdown-item" href='{% url "userprofile:edit" user.id %}'> <i class="fas fa-user-edit"></i> 个人信息</a>
            <a class="dropdown-item" href='{% url "userprofile:logout" %}'>  <i class="fas fa-sign-out-alt"></i> 退出登录</a>
          </div>
        </li>
        <!-- 如果用户未登录，则显示 “登录” -->
        {% else %}
        <li class="nav-item">
          <!-- <a class="nav-link" href="{% url 'userprofile:login' %}">登录</a> -->
          <a class="nav-link" href="{% url 'account_login' %}"><i class="fas fa-user"></i> 登录</a>

        </li>
        <!-- if 语句在这里结束 -->
        {% endif %}
      </ul>
    </div>

  </div>
</nav>